<template>
<div class="e-form">
        <!-- <div class="left">
            <select-org @select="onSelectOrg" />
        </div> -->
         <div class="tabs"  v-show="viewList === true">
             <el-tabs tab-position="left" v-model="tabsName" @tab-click="onChangeTab">
                 <!-- 基本信息 -->
                <el-tab-pane label="加款" name="add" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="扣款" name="deduct" :disabled="clickTabFlag"></el-tab-pane>
                <div>
                    <div id="addCon">
                        <div class="tabs-title" id="add">加款</div>
                        <div style="width: 100%">
                            <div style="height:100%"  class="right">
                            <div class="e-table">
                                <div class="top">
                                    <div class="left">
                                        <div class="left-btn">
                                            <el-button type="primary" size="mini"
                                                @click="goAdd('加款')"
                                                class="btn-greenYellow"
                                            >新增</el-button>
                                            <el-button type="default" size="mini"
                                            >导入</el-button>
                                            <el-button type="default" size="mini"
                                            >导出</el-button>
                                        </div>
                                    </div>
                                    <div class="search_box">
                                        <el-input class="ipt" type="text"
                                            placeholder="输入搜索关键字"
                                            v-model="searchKey"
                                            @select="onSearch('加款',$event)"
                                            @change="onSearch('加款',$event)"
                                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch('加款',$event)" /></el-input>
                                    </div>
                                </div>
                                <el-table
                                    :data="tableData"
                                    border
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    @current-change="tableSelect"
                                    class="table"
                                >
                                    <el-table-column show-overflow-tooltip fixed label="操作" width="200">
                                        <template slot-scope="{ row }">
                                            <div class="oparation_box">
                                                <div>
                                                    <i
                                                        class="el-icon-edit"
                                                        style="font-size: 24px"
                                                        :class="{
                                                            'icon-edit-active-color': MouseEnterId == row.kvValue
                                                        }"
                                                        @click="tableDbEdit(row,'加款')"
                                                    ></i>
                                                </div>
                                                <div>
                                                    <i
                                                        class="el-icon-delete"
                                                        style="font-size: 24px"
                                                        :class="{
                                                            'icon-delete-active-color': MouseEnterId == row.kvValue
                                                        }"
                                                        @click="tableDbDelete(row,'加款')"
                                                    ></i>
                                                </div>
                                            </div>
                                    </template>
                                    </el-table-column>
                                        <el-table-column prop="kvKey" label="类别名称" min-width="200"> </el-table-column>
                                        <el-table-column prop="kvStatus" label="启用状态" width="200">
                                            <template slot-scope="{ row }">
                                                <span>{{['否','是'][row.kvStatus]}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 <div>
                    <div id="addCon">
                        <div class="tabs-title" id="deduct">扣款</div>
                        <div style="width: 100%">
                            <div style="height:100%"  class="right">
                            <div class="e-table">
                                <div class="top">
                                    <div class="left">
                                        <div class="left-btn">
                                            <el-button type="primary" size="mini"
                                                @click="goAdd('扣款')"
                                                class="btn-greenYellow"
                                            >新增</el-button>
                                            <el-button type="default" size="mini"
                                            >导入</el-button>
                                            <el-button type="default" size="mini"
                                            >导出</el-button>
                                        </div>
                                    </div>
                                    <div class="search_box">
                                        <el-input class="ipt" type="text"
                                            placeholder="输入搜索关键字"
                                            v-model="searchKey1"
                                            @select="onSearch('扣款',$event)"
                                            @change="onSearch('扣款',$event)"
                                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch('扣款',$event)" /></el-input>
                                    </div>
                                </div>
                                <el-table
                                    :data="tableData1"
                                    border
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    @current-change="tableSelect"
                                >
                                    <el-table-column show-overflow-tooltip fixed label="操作" width="200">
                                        <template slot-scope="{ row }">
                                            <div class="oparation_box">
                                                <div>
                                                    <i
                                                        class="el-icon-edit"
                                                        style="font-size: 24px"
                                                        :class="{
                                                            'icon-edit-active-color': MouseEnterId == row.kvValue
                                                        }"
                                                        @click="tableDbEdit(row,'扣款')"
                                                    ></i>
                                                </div>
                                                <div>
                                                    <i
                                                        class="el-icon-delete"
                                                        style="font-size: 24px"
                                                        :class="{
                                                            'icon-delete-active-color': MouseEnterId == row.kvValue
                                                        }"
                                                        @click="tableDbDelete(row,'扣款')"
                                                    ></i>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                        <el-table-column prop="kvKey" label="类别名称" min-width="200"> </el-table-column>
                                        <el-table-column prop="kvStatus" label="启用状态" width="200">
                                            <template slot-scope="{ row }">
                                                <span>{{['否','是'][row.kvStatus]}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tabs>
            <div id="seat" :style="{height: seatHeight + 'px'}"></div>
        </div>
        <!-- 新增编辑界面 -->
        <div class="base-page ">
            <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
                <div class="e-form" style="padding: 0 10px 10px;">
                    <div class="tabs-title">{{ dicName }}</div>
                    <el-form ref="form" :model="formData" label-width="150px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="类别名称：">
                                    <el-input v-model="formData.kvKey"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否启用：">
                                <el-checkbox v-model="formData.kvStatus" :true-label="1" :false-label="0"></el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="footer">
                    <div class="right-btn">
                        <el-button type="primary" size="mini"
                            @click="onSave"
                        >保存</el-button>
                        <el-button type="default" size="mini"
                            @click="onCancel"
                        >取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import $ from 'jquery'
import '@/utils/jquery.scrollTo.min'
// import SelectOrg from '@/components/selectOrg'
// import Pagination from '@/components/pagination/pagination'
import { debounce } from '@/utils/common'
import { getCurrency, setCurrency, deleteCurrency } from '@/api/base/currency'
export default {
    components: {
    },
    data () {
        return{
            tabsName: 'add',
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            searchKey1: '',
            treeData: [],
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            tableData1: [],
            formData: {},
            params: {
                dicName: '',
                dicKey: '',
                isEnable: false
            },
            MouseEnterId: 0,
            selectData: null,
            currencyOptions: [],
            tableData2: [],
            idsTop: [],
            dicName: '加款'
        }
    },
    created () {
        this.getTableData()
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 280) + 'px'
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 300) + 'px'
        },
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 72 - this.lastConHeight
        }
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()

        // 保存所有tabName
        const arr = ['add', 'deduct']
        let $idsTop = []
        window.addEventListener('scroll', () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }

            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    console.log('item', item)
                    const itemTop = document.getElementById(item).offsetTop
                    return itemTop
                })
            }
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if ((scrollTop + 1) >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        })

        this.screenWidth = document.documentElement.clientWidth
        this.screenHeight = document.documentElement.clientHeight
        window.addEventListener('resize', () => {
            this.screenWidth = document.documentElement.clientWidth
            this.screenHeight = document.documentElement.clientHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        })

    },
    methods: {
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                if (document.getElementById('recodesCon')) {
                    const lastConHeight = document.getElementById('recodesCon').offsetHeight
                    console.log('lastConHeight: ', lastConHeight)
                    this.lastConHeight = lastConHeight
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        onChangeTab (e) {
            console.log('clickTabFlag: ', this.clickTabFlag)
            $.scrollTo(`#${e.name}`, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
        getTableData () {
            this.params.dicName = this.dicName
            getCurrency(this.params).then(res=>{
                this.tableData = res
                this.dicName = '扣款'
                this.params.dicName = this.dicName
                getCurrency(this.params).then(res=>{
                    this.tableData1 = res
                })
            })
        },
        getTableData1 () {
            this.params.dicName = this.dicName
            getCurrency(this.params).then(res=>{
                if(this.dicName === '加款') {
                    this.tableData = res
                }else{
                    this.tableData1 = res
                }
            })
        },
        onSelectOrg (val) {
            console.log('onSelectOrg: ', { ...val })
            this.formData = {
                ...val,
                currency: 10
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (dicName, e) {
            let searchKey = e
            if (typeof e === 'object') {
                if(dicName === '加款') {
                    searchKey = this.searchKey
                }else{
                    searchKey = this.searchKey1
                }
            }
            this.params.dicKey = searchKey
            this.params.dicName = dicName
            this.dicName = dicName
            console.log('params', this.params)
            this.getTableData1()
        },
        goAdd (dicName) {
            this.dicName = dicName
            this.viewList = 'add'
            this.formData = {
                'kvId': '',
                'kvKey': '',
                'kvStatus': 1,
                'kvValue': ''
            }
        },
        onEdit () {
            if(!this.selectData) return
            this.viewList = 'edit'
            this.formData = this.selectData
        },
        onDistPost () {
            this.viewList = 'post'
        },
        onSave () {
            this.formData.dicName = this.dicName
            this.formData.kvValue = this.formData.kvKey
            if(this.dicName === '加款') {
                this.formData.kvDescription = '1'
            }else{
                this.formData.kvDescription = '2'
            }
            setCurrency(this.formData).then(()=>{
                this.clientPop('suc', '保存成功', ()=>{ this.viewList = true;this.getTableData1() })
            })
        },
        //取消
        onCancel () {
            this.viewList = true
        },
        //表格选中
        tableSelect ( row ) {
            this.selectData = row
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.kvValue
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //编辑
        tableDbEdit (row, dicName) {
            if(!row) return
            this.dicName = dicName
            this.formData = row
            this.viewList = 'edit'
        },
        //编辑
        tableDbDelete (row, dicName) {
            if(!row) return
            this.dicName = dicName
            row.dicName = dicName
            this.clientPop('err', this.oneDeleteErr, ()=>{
                deleteCurrency(row).then(()=>{
                    this.clientPop('suc', '删除成功', ()=>{
                        this.viewList = true
                        this.getTableData1()
                    })
                })
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.form {
    margin-top: 10px;
}

.e-table {
    background: #fff;

    /* .top {
    .left {
      padding: 20px;
      padding-top: 0px;
    }
  } */
}

.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.right{
    border: none;
}
</style>
